<template>
  <div class="home">
    <div class="head_right">
      <div class="head_box">
        <img src="../assets/img/EB.png" alt="" />
        <img src="../assets/img/1.png" alt="" />
      </div>
    </div>
   <div class="head">
        <van-tabs v-model="active" offset-top=0  >
    
      <van-tab :title="'推荐'">
        <div class="banner" v-if="bannerData">
          <van-swipe @change="onChange" autoplay="3000">
            <van-swipe-item
              v-for="(item, index) in bannerData[0].children"
              :key="index"
            >
              <div class="banner_img">
                <img :src="item.model.cover" alt="" />
                <p>{{ item.model.title }}</p>
              </div>
            </van-swipe-item>
            <template #indicator>
              <div class="custom-indicator">
                <span> {{ current + 1 }}</span
                >/{{ bannerlength }}
              </div>
            </template>
          </van-swipe>
        </div>
        <div class="middle">
          <div class="middle_content" v-for="item in MiddleCard" :key="item.children[0].model.resource.id">
            <router-link class="middle_content_head" tag="div" :to="'/homeitem?reid='+item.children[0].model.resource.id">
              <img :src="item.children[0].model.resource.cover" alt="" />
            </router-link>
            <div class="show">
              <div class="left">
                <div class="look">
                  <img src="../assets/img/eye.png" alt="" /><span>{{item.children[0].model.resource.count.count_view|playCountNum}}</span>
                </div>
                <div class="like">
                  <img src="../assets/img/like3.png" alt="" /><span>{{item.children[0].model.resource.count.count_like|playCountNum}}</span>
                </div>
              </div>
              <div class="right">{{item.children[0].model.resource.duration|playerTime}}</div>
            </div>
            <div class="middle_content_middle">
              <p>{{item.children[0].model.resource.title}}</p>
            </div>
            <div class="middle_content_bottom">
              <h3>{{item.children[0].model.resource.author.userinfo.username}}</h3>
              <img src="../assets/img/Zk1.png" alt="" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'每日精选'">
        <daychance-com></daychance-com>
      </van-tab>
      <van-tab :title="'热门'">
        <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'剧情短片'">
         <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'创意'">
         <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'旅拍'">
         <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'干货教程'">
         <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'混剪'">
         <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'器材党'"></van-tab>
      <van-tab :title="'动画'">
         <hot-com></hot-com>
      </van-tab>
      <van-tab :title="'Vlog'"></van-tab>
      <van-tab :title="'古风'"></van-tab>
      <van-tab :title="'广告'">
         <hot-com></hot-com>
      </van-tab>
    </van-tabs>
   </div>
    <tab-bar></tab-bar>
  </div>
</template>

<script>
import tabBar from "../components/tabBar.vue";
import { getTab, getRecommod } from "../api/home";
import HotCom from "../components/HotCom.vue";


import DaychanceCom from '../components/DaychanceCom.vue';
export default {
  data() {
    return {
      active: 4,
      current: 1,
      tabData: null,
      recommod: null,
      bannerData: null,
      bannerlength: null,
      MiddleCard: null,
    };
  },
  components:{
    HotCom,
    DaychanceCom,
    tabBar,
  },
  methods: {
      // 获取Tab数据
    getTabFun() {
      getTab().then((data) => {
        this.tabData = data.data.tab;
        // console.log(this.tabData);
      });
    },
    // 获取首页推荐数据
    getRecommodFun() {
      getRecommod().then((data) => {
        this.recommod = data.data.children;
        //    获取轮播图数据
        this.bannerData = this.recommod.filter(item => item.type == "uiBanner");
        this.bannerlength = this.bannerData[0].children.length;
        //获取小个show的数据
        this.MiddleCard=this.recommod.filter(item=>item.type=='uiMiddleCard')
        // console.log(this.MiddleCard);
      });
    },
    onChange(index) {
      this.current = index;
    },
  },
  created() {
    this.getTabFun();
    this.getRecommodFun();
  },
  filters:{
       
            playCountNum(value){ //134567897
                if(value < 1000){
                    return value;
                }                      // 1.200    12.000  
                let k = value > 1000?value/1000:value;//千计算
                let w = k > 10? (k/10).toFixed(1) +"w" :(k).toFixed(1) +"k";//万计算

                return w;
            },
             
          playerTime(data) {
          let m = parseInt(data / 60); //分钟
          let s = parseInt(data % 60); //秒
        
        return (m >10? m: "0" + m) +"'"+ (s <10 ? "0" + s : s)+"''"; 
         
         },  
         
        }
};
</script>

<style lang="less" >
.home {
  background-color: #f2f2f2;
  position: relative;
  .head_right {
    position: fixed;
    right: 0;
    top: 0px;
    z-index: 20;
    padding: 12px 0px;
    background-color: #fff;
    width: 20%;
    .head_box {
      display: flex;
      justify-content: space-evenly;

      img {
        display: block;
        display: flex;
        width: 20px;
      }
    }
  }
  .head{
    // position: fixed;
    // top: 0px;
    .van-tabs__wrap {
  width: 80%;
    position: fixed;
    top: 0px;
  z-index: 50;
}
.van-swipe {
  border-radius: 5px;
}
  .banner {
    width: 95%;
    margin: 0 auto;
    margin-top: 55px;
    .banner_img {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        display: block;
      }
      p {
        position: absolute;
        bottom: 10px;
        left: 8px;
        color: #fff;
        font-size: 14px;
      }
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      span {
        font-size: 20px;
        font-weight: 500;
      }
    }
  }
  .middle {
    width: 95%;
    margin: 10px auto;
    display: flex;
    margin-bottom: 50px;
    justify-content: space-between;
    flex-wrap: wrap;
    .middle_content {
      width: 48%;
      border-radius: 5px;
      overflow: hidden;
     position: relative;
     margin-bottom: 10px;
      background-color: rgba(255, 255, 255, 0.581);

      .middle_content_head {
        
        width: 100%;
        img {
          width: 100%;
          height: 100px;
        }
      }
      .show {
        position: absolute;
        top: 70px;
        padding: 5px 8px;
        display: flex;
        width: 80%;
        justify-content: space-between;
        .left {
          display: flex;
          // height: 24px;
          .look {
            display: flex;
            margin-right: 10px;
            span {
              display: block;
              height: 18px;
              font-size: 8px;
              line-height: 20px;
              color: #fff;
            }
            img {
              display: block;
              width: 18px;
              height: 18px;
              margin-right: 5px;
            }
          }
          .like {
            display: flex;
            flex: 1;
            span {
              display: block;
              height: 18px;
              font-size: 10px;
              line-height: 20px;
              color: #fff;
            }
            img {
              display: block;
              width: 18px;
              height: 18px;
              margin-right: 5px;
            }
          }
        }
        .right {
          position: relative;
          right: -10%;
          color: #fff;
          font-size: 10px;
          line-height: 20px;
        }
      }
      .middle_content_middle {
        padding: 5px 8px;
        height: 32px;
        p {
          font-size: 12px;
          font-weight: 600;
        }
      }
      .middle_content_bottom {
        padding: 5px 8px;
        display: flex;
        justify-content: space-between;
        h3 {
          font-size: 12px;
          color: gray;
        }
        img {
          display: block;
          width: 10px;
        }
      }
    }
  }
  }

}
// .van-tabs__wrap {
//   width: 80%;
//     position: fixed;
//     top: 0px;
//   z-index: 50;
// }
// .van-tabs__nav{
  
// }

// .van-swipe {
//   border-radius: 5px;
// }

</style>